<template>
  switch parent border:
  <el-switch v-model="parentBorder" />
  preserve expanded:
  <el-switch v-model="preserveExpanded" />

  <el-table
    :data="tableData"
    :border="parentBorder"
    :preserve-expanded-content=true
    style="width: 100%"
    row-key="date"
  >
    <!-- 修正后的展开列 -->
    <el-table-column type="expand">
      <template #default="">
        <div style="background-color: #ecf2fb; padding: 15px">
          <table class="bet-more-tb ">
            <tbody>
            <tr data-subactive="1">
              <th>半全场</th>
              <td><p class="sbetbtn" data-type="bqc" data-value="3-3" data-sp="4.30">胜胜<i>4.30</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="3-1" data-sp="14.00">胜平<i>14.00</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="3-0" data-sp="29.00">胜负<i>29.00</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="1-3" data-sp="5.40">平胜<i>5.40</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="1-1" data-sp="5.20">平平<i>5.20</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="1-0" data-sp="6.40">平负<i>6.40</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="0-3" data-sp="26.00">负胜<i>26.00</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="0-1" data-sp="14.00">负平<i>14.00</i></p></td>
              <td><p class="sbetbtn" data-type="bqc" data-value="0-0" data-sp="4.50">负负<i>4.50</i></p></td>
            </tr>
            </tbody>
          </table>
          <table class="bet-more-tb ">
            <tbody>
            <tr data-subactive="1">
              <th rowspan="3">比分</th>
              <td><p class="sbetbtn" data-type="bf" data-value="1:0" data-sp="7.50">1:0<i>7.50</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="2:0" data-sp="11.50">2:0<i>11.50</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="2:1" data-sp="8.00">2:1<i>8.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="3:0" data-sp="27.00">3:0<i>27.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="3:1" data-sp="21.00">3:1<i>21.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="3:2" data-sp="30.00">3:2<i>30.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="4:0" data-sp="75.00">4:0<i>75.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="4:1" data-sp="60.00">4:1<i>60.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="4:2" data-sp="75.00">4:2<i>75.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="5:0" data-sp="200.00">
                5:0<i>200.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="5:1" data-sp="200.00">
                5:1<i>200.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="5:2" data-sp="250.00">
                5:2<i>250.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="胜其它" data-sp="80.00">胜其它<i>80.00</i>
              </p></td>
            </tr>
            <tr>
              <td><p class="sbetbtn" data-type="bf" data-value="0:0" data-sp="10.00">0:0<i>10.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="1:1" data-sp="6.50">1:1<i>6.50</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="2:2" data-sp="14.00">2:2<i>14.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="3:3" data-sp="55.00">3:3<i>55.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="平其它" data-sp="200.00">平其它<i>200.00</i>
              </p></td>
            </tr>
            <tr>
              <td><p class="sbetbtn" data-type="bf" data-value="0:1" data-sp="8.00">0:1<i>8.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="0:2" data-sp="14.00">0:2<i>14.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="1:2" data-sp="9.00">1:2<i>9.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="0:3" data-sp="35.00">0:3<i>35.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="1:3" data-sp="25.00">1:3<i>25.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="2:3" data-sp="32.00">2:3<i>32.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="0:4" data-sp="100.00">
                0:4<i>100.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="1:4" data-sp="75.00">1:4<i>75.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="2:4" data-sp="120.00">
                2:4<i>120.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="0:5" data-sp="350.00">
                0:5<i>350.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="1:5" data-sp="250.00">
                1:5<i>250.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="2:5" data-sp="350.00">
                2:5<i>350.00</i></p></td>
              <td><p class="sbetbtn" data-type="bf" data-value="负其它" data-sp="120.00">负其它<i>120.00</i>
              </p></td>
            </tr>
            </tbody>
          </table>
          <table class="bet-more-tb ">
            <tbody>
            <tr data-subactive="1">
              <th>进球数</th>
              <td><p class="sbetbtn" data-type="jqs" data-value="0" data-sp="10.00">0<i>10.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="jqs" data-value="1" data-sp="4.25">1<i>4.25</i></p>
              </td>
              <td><p class="sbetbtn" data-type="jqs" data-value="2" data-sp="3.40">2<i>3.40</i></p>
              </td>
              <td><p class="sbetbtn" data-type="jqs" data-value="3" data-sp="3.70">3<i>3.70</i></p>
              </td>
              <td><p class="sbetbtn" data-type="jqs" data-value="4" data-sp="6.70">4<i>6.70</i></p>
              </td>
              <td><p class="sbetbtn" data-type="jqs" data-value="5" data-sp="12.00">5<i>12.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="jqs" data-value="6" data-sp="23.00">6<i>23.00</i>
              </p></td>
              <td><p class="sbetbtn" data-type="jqs" data-value="7" data-sp="35.00">7+<i>35.00</i>
              </p></td>
            </tr>
            </tbody>
          </table>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import dayjs from 'dayjs';

  const parentBorder = ref(false);
  const preserveExpanded = ref(false);

  // 生成模拟数据
  const generateMockData = (): FootballDayResultVO[] => {
    const days: FootballDayResultVO[] = [];
    const today = dayjs();

    for (let i = 0; i < 11; i++) {
      const date = today.subtract(i, 'day');
      days.push({
        dayShow: date.format('MM-DD'),
        week: ['日', '一', '二', '三', '四', '五', '六'][date.day()],
        selectCount: Math.floor(Math.random() * 20) + 10,
        shoot: Math.floor(Math.random() * 10) + 5,
        matchList: []
      });
    }

    // 生成比赛数据
    const matches: AppFootballMatchRespVO[] = [];
    const teams = [
      '曼城', '利物浦', '切尔西', '曼联', '阿森纳', '热刺',
      '皇马', '巴萨', '拜仁', '多特', '巴黎', '尤文'
    ];
    const leagues = ['英超', '西甲', '德甲', '意甲', '法甲'];
    const colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6'];

    for (let i = 1; i <= 8; i++) {
      const homeIndex = Math.floor(Math.random() * teams.length);
      const awayIndex = (homeIndex + Math.floor(Math.random() * (teams.length - 1))) % teams.length;
      const leagueIndex = Math.floor(Math.random() * leagues.length);

      matches.push({
        matchId: 1000 + i,
        number: `S${i}`,
        matchName: leagues[leagueIndex],
        color: colors[leagueIndex],
        openTime: dayjs().add(i, 'hour').format('HH:mm'),
        homeTeam: teams[homeIndex],
        visitingTeam: teams[awayIndex],
        halfFullCourt: `${Math.floor(Math.random() * 3)}:${Math.floor(Math.random() * 3)} (${Math.floor(Math.random() * 2)}:${Math.floor(Math.random() * 2)})`,
        homePreScoreBan: Math.floor(Math.random() * 3),
        awayPreScoreBan: Math.floor(Math.random() * 3),
        scoreSelect: ['胜', '平', '负'][Math.floor(Math.random() * 3)],
        homeAlgScoreBan: Math.floor(Math.random() * 3),
        awayAlgScoreBan: Math.floor(Math.random() * 3),
        homeAlgScoreQuan: Math.floor(Math.random() * 3),
        awayAlgScoreQuan: Math.floor(Math.random() * 3),
        ballDiff: Math.floor(Math.random() * 3),
        ouResult: Math.random() > 0.5 ? '大球' : '小球',
        ballNum: Math.floor(Math.random() * 5),
        ballNumPredict: Math.floor(Math.random() * 5),
        isSingle: Math.random() > 0.7 ? '1' : '0',
        letBall: Math.random() > 0.5 ? `+${Math.floor(Math.random() * 2)}` : `-${Math.floor(Math.random() * 2)}`,
        winPay: (Math.random() * 5 + 1).toFixed(2),
        drawPay: (Math.random() * 5 + 1).toFixed(2),
        visitPay: (Math.random() * 5 + 1).toFixed(2),
        letWinPay: (Math.random() * 5 + 1).toFixed(2),
        letDrawPay: (Math.random() * 5 + 1).toFixed(2),
        letVisitPay: (Math.random() * 5 + 1).toFixed(2),
        winFlag: Math.random() > 0.7 ? 1 : 0,
        drawWinFlag: Math.random() > 0.7 ? 1 : 0,
        visitWinFlag: Math.random() > 0.7 ? 1 : 0,
        letWinFlag: Math.random() > 0.7 ? 1 : 0,
        letDrawWinFlag: Math.random() > 0.7 ? 1 : 0,
        letVisitWinFlag: Math.random() > 0.7 ? 1 : 0,
        winRate: (Math.random() * 0.5).toFixed(2),
        drawWinRate: (Math.random() * 0.5).toFixed(2),
        visitWinRate: (Math.random() * 0.5).toFixed(2),
        letWinRate: (Math.random() * 0.5).toFixed(2),
        letDrawWinRate: (Math.random() * 0.5).toFixed(2),
        letVisitWinRate: (Math.random() * 0.5).toFixed(2),
        minusWinRate: (Math.random() * 0.5).toFixed(2),
        minusDrawWinRate: (Math.random() * 0.5).toFixed(2),
        minusVisitWinRate: (Math.random() * 0.5).toFixed(2),
        ouHomeRate: (Math.random() * 0.5).toFixed(2),
        ouDrawRate: (Math.random() * 0.5).toFixed(2),
        ouVisitRate: (Math.random() * 0.5).toFixed(2),
        selectSort: Math.random() > 0.7 ? Math.floor(Math.random() * 5) + 1 : 0,
        teamScore: true,
        expanded: false
      });
    }

    // 为每天分配比赛
    days.forEach(day => {
      day.matchList = [...matches].sort(() => Math.random() - 0.5).slice(0, 4);
    });

    return days;
  };
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Spike',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Tyke',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
      ],
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Spike',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Tyke',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
      ],
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Spike',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Tyke',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
      ],
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Spike',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Tyke',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
      ],
    },
    {
      date: '2016-05-08',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Spike',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Tyke',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
      ],
    },
    {
      date: '2016-05-06',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Spike',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Tyke',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
      ],
    },
    {
      date: '2016-05-07',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
        {
          name: 'Jerry',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Spike',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
        {
          name: 'Tyke',
          state: 'California',
          city: 'San Francisco',
          address: '3650 21st St, San Francisco',
          zip: 'CA 94114',
        },
      ],
    },
  ];
</script>

<style scoped>
  .bet-more-tb {
    margin: 0 0 5px;
  }

  .bet-more-tb {
    margin: 0 0 5px;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    unicode-bidi: isolate;
    border-spacing: 2px;
    border-color: gray;
  }

  tbody {
    display: table-row-group;
    vertical-align: middle;
    unicode-bidi: isolate;
    border-color: inherit;
  }

  .bet-tb tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }

  .bet-more-tb tbody tr {
    height: 50px;
  }

  tr {
    display: table-row;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-color: inherit;
  }

  .bet-more-tb th {
    width: 64px;
    vertical-align: middle;
    font-size: 12px;
    text-align: center;
    border: 1px solid #B4CCE8;
    color: #000;
    background: #fff;
  }

  .bet-more-tb td {
    vertical-align: middle;
    text-align: center;
    border: 1px solid #B4CCE8;
    background: #fff;
  }

  td, th {
    padding: 0;
  }

  td {
    display: table-cell;
    vertical-align: inherit;
    unicode-bidi: isolate;
  }

  .bet-tb-end .sbetbtn {
    color: #999;
    border-color: #FAFAFA;
    background: #FAFAFA;
  }

  .sbetbtn {
    cursor: pointer;
    padding-top: 6px;
    height: 32px;
    border: 1px solid #fff;
  }

  .sbetbtn {
    width: 70px;
    text-align: center;
    line-height: 1.2;
    font-size: 12px;
    color: #6d91b7;
    background: #fff;
  }

  h2, p {
    margin: 0;
    padding: 0;
  }

  .bet-tb-end .sbetbtn i {
    color: #777;
  }

  .sbetbtn i {
    display: block;
    font-weight: bold;
    color: #555;
  }

  i, em {
    font-style: normal;
  }

</style>
